<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=5" >
<meta http-equiv="X-UA-Compatible" content="IE=7/8/9/10" >
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7/8/9" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" >
<script type="text/javascript">
	 if(!-[1,] && document.documentMode == '5'){
    alert('\u60A8\u7684\u6D4F\u89C8\u5668\u7248\u672C\u6E32\u67D3\u6A21\u5F0F\u4E0D\u6B63\u786E\uFF0C\u8BF7\u4F7F\u7528360\u6216\u8C37\u6B4C\u7B49\u6D4F\u89C8\u5668\uFF0C\u6216\u6253800800\u627E IT \u5E2E\u4F60\u628A\u6D4F\u89C8\u5668\u7684\u602A\u5F02\u6E32\u67D3\u6A21\u5F0F\u6539\u4E3A\u6807\u51C6\u6E32\u67D3\u6A21\u5F0F');
 }
</script>

<title>云主机-实例</title>

<link type="text/css" rel="stylesheet" href="./css/common.css" />
<link type="text/css" rel="stylesheet" href="./css/host.css" />
<link type="text/css" rel="stylesheet" href="./css/fontCss/font-awesome.min.css" />

</head>

<body>

<div class="container">
	
	<div class="header clearfix">
		<div class="headerLogo fl"></div>

		<ul class="headerList fr">
			<li><a href="#">资源管理</a></li>
			<li><a href="#">平台管理</a></li>
			<li><a href="#">用户admin</a></li>
		</ul>
	</div><!-- end of header -->

	<div class="content clearfix">
		<div class="menus">
			<ul class="menusCont">
				<li>
					<a href="#" class="menusCont_a">
						<i class="fa fa-coffee"></i>概况
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-cloud"></i>云主机
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">实例</a>
						<a href="#">主机快照</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-database"></i>云硬盘
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">卷</a>
						<a href="#">硬盘快照</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-sitemap"></i>云网络
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">内部网络</a>
						<a href="#">内部FIP</a>
						<a href="#">路由</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-shield"></i>防火墙
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">防火墙</a>
						<a href="#">防火墙策略</a>
						<a href="#">防火墙规则</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-cog"></i>安全
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">密钥对</a>
						<a href="#">安全组</a>
						<a href="#">操作日志</a>
						<a href="#">通知列表</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>负载均衡
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">资源池</a>
						<a href="#">监控</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>自动伸缩
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-tasks"></i>应用市场
						<i class="fa fa-caret-right fr"></i>
					</a>
					<div class="menusCont_sub">
						<a href="#">环境</a>
						<a href="#">应用</a>
					</div>
				</li>
				<li>
					<a href="javascript:;" class="menusCont_a">
						<i class="fa fa-bolt"></i>云监控
						<i class="fa fa-caret-right fr"></i>
					</a>
				</li>
			</ul>
		</div><!--end of menus -->

		<div class="main">
			<div class="w100">
				<ul class="hC_choose clearfix">
					<li class="fl">
						<div class="hC_create greenBtn-o">
							<a href="#"><i class="fa fa-plus" aria-hidden="true"></i>创建主机</a>
						</div>
					</li>
					<li class="fl">
						<div class="hC_restart ashyBtn-o">
							<a href="#"><i class="fa fa-exchange" aria-hidden="true"></i> 软重启</a>
						</div>
					</li>
					<li class="fl">
						<div class="hC_detele ashyBtn-o">
							<a href="#"><i class="fa fa-trash-o" aria-hidden="true"></i>终止并删除</a>
						</div>
					</li>
					<li class="fl">
						<div class="hC_tag grayBtn-o">
							<a href="#"><i class="fa fa-tags" aria-hidden="true"></i>标签</a>
						</div>
					</li>
					<li class="fl">
						<div class="hC_refresh">
							<a href="#" title="刷新"><i class="fa fa-refresh fa-2x" aria-hidden="true"></i></a>
						</div>
					</li>
					<li class="fr">
						<div class="hC_search">
							<input type="text" value="请输入关键字……" onfocus="if(this.value == '请输入关键字……') this.value = ''" onblur="if(this.value =='') this.value = '请输入关键字……'"/>
							<a href="#"><i class="fa fa-search fa-lg" aria-hidden="true"></i></a>
						</div>
					</li>
				</ul>
				<div class="hC_host">
					<table class="hC_hostTable">
						<thead>
							<tr>
								<th class="hC_check"><input type="checkbox" name=""></th>
								<th class="hC_name">ID（名称）</th>
								<th class="hC_state">状态</th>
								<th class="hC_class">类型</th>
								<th class="hC_map">映像</th>
								<th class="hC_setting">配置</th>
								<th class="hC_net">网络</th>
								<th class="hC_ip">公网IP</th>
								<th class="hC_fire">防火墙</th>
								<th class="hC_warning">告警状态</th>
								<th class="hC_createdin">创建于</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="hC_check"><input type="checkbox" name=""></td>
								<td>xxxx</td>
								<td class="hC_running"><span>RUNNING</span></td>
								<td>这是类型</td>
								<td>这是映像</td>
								<td>这是配置</td>
								<td>这是网络</td>
								<td>192.168.0.1</td>
								<td>这是防火墙</td>
								<td>安全</td>
								<td>我也不知道</td>
							</tr>
							<tr>
								<td class="hC_check"><input type="checkbox" name=""></td>
								<td>xxxx</td>
								<td class="hC_stopped"><span>STOPPED</span></td>
								<td>这是类型</td>
								<td>这是映像</td>
								<td>这是配置</td>
								<td>这是网络</td>
								<td>192.168.0.1</td>
								<td>这是防火墙</td>
								<td>安全</td>
								<td>我也不知道</td>
							</tr>
							<tr>
								<td class="hC_check"><input type="checkbox" name=""></td>
								<td>xxxx</td>
								<td class="hC_destroyed"><span>DESTROYED</span></td>
								<td>这是类型</td>
								<td>这是映像</td>
								<td>这是配置</td>
								<td>这是网络</td>
								<td>192.168.0.1</td>
								<td>这是防火墙</td>
								<td>安全</td>
								<td>我也不知道</td>
							</tr>
						</tbody>
					</table>
				</div><!-- end of hC_host -->

				<div class="hC_detail">
					<div class="hC_detailToper">
						<p>云主机<span>This is cloudName.</span></p>
					</div>
					<div class="hC_detailChoose">
						<span class="grayBtn hostGeneral"><a href="javascript:;">云主机概况</a></span>
						<span class="grayBtn-o hostMonitor"><a href="javascript:;">云主机监控</a></span>
					</div>
					<ul class="hC_detailMess clearfix">
						<li class="fl">
							<div class="hC_messDemo">
								<div class="hC_toper">信息</div>
								<div class="hC_messDet">
									<p>名称: <span>uuu</span></p> 
									<p>云主机ID: <span>6b68a4f2-f120-4c04-9d74-771b0f42742b</span></p>
									<p>状态:<span>Active</span></p>
									<p>任务:<span>None</span></p>
									<p>可用域:<span>Public</span></p>
									<p>创建时间:<span>2016-12-11 20:30:24</span></p>
									<p>正常运行时间:<span>4天 19小时</span>
								</div>
							</div>
							<div class="hC_messDemo">
								<div class="hC_toper">IP地址</div>
								<div class="hC_messDet">
									<p>内网:<span>192.168.0.2</span></p>
								</div>
							</div>
							<div class="hC_messDemo">
								<div class="hC_toper">元数据</div>
								<div class="hC_messDet">
									<p>键名称:<span>default-keyPair</span></p>
									<p>镜像名称:<span>wlcentos6.5</span></p>
								</div>
							</div>
						</li>
						<li class="fr">
							<div class="hC_messDemo">
								<div class="hC_toper">信息</div>
								<div class="hC_messDet">
									<p>名称: <span>uuu</span></p> 
									<p>云主机ID: <span>6b68a4f2-f120-4c04-9d74-771b0f42742b</span></p>
									<p>状态:<span>Active</span></p>
									<p>任务:<span>None</span></p>
									<p>可用域:<span>Public</span></p>
									<p>创建时间:<span>2016-12-11 20:30:24</span></p>
									<p>正常运行时间:<span>4天 19小时</span>
								</div>
							</div>
							<div class="hC_messDemo">
								<div class="hC_toper">安全组</div>
								<div class="hC_messDet">
									<p>名称: <span>uuu</span></p> 
									<p>云主机ID: <span>6b68a4f2-f120-4c04-9d74-771b0f42742b</span></p>
									<p>状态:<span>Active</span></p>
									<p>任务:<span>None</span></p>
									<p>可用域:<span>Public</span></p>
									<p>创建时间:<span>2016-12-11 20:30:24</span></p>
									<p>正常运行时间:<span>4天 19小时</span>
								</div>
							</div>
						</li>
					</ul>
					<ul class="hC_detailLine clearfix">
						<li>
							<div id="line1" style="width:270px;height:272px;"></div>
						</li>
						<li>
							<div id="line2" style="width:270px;height:272px;"></div>
						</li>
						<li>
							<div id="line3" style="width:270px;height:272px;"></div>
						</li>
						<li>
							<div id="line4" style="width:270px;height:272px;"></div>
						</li>
						<li>
							<div id="line5" style="width:270px;height:272px;"></div>
						</li>
						<li>
							<div id="line6" style="width:270px;height:272px;"></div>
						</li>
					</ul>
				</div><!-- end of hC_detail -->
			</div>	
		</div><!-- end of main -->
	</div><!-- end of content -->

</div><!-- end of container -->

<div class="pop popsHost" style="display: none;">
	<div class="popCont popsHost_cont">
		<div class="popsTit clearfix">
			<p>创建主机</p>
			<a href="#"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>
		</div>

		<div class="popsHost_wrap clearfix">
			<div class="popsHost_choose fl">
				<ul class="popsHost_step clearfix">
					<li class="step1 stepOn">选择映像<span>1</span></li>
					<li class="step2">配置选择<span>2</span><b></b></li>
					<li class="step3">网络设置<span>3</span><b></b></li>
					<li class="step4">基本信息<span>4</span><b></b></li>
				</ul>
				<div class="popsHost_all clearfix">
					<div class="popsHost_list fl">
						<div class="popsHost_overHide">
							<ul class="popsHost_listChoose">
								<li class="clearfix">
									<div class="popsHost_listChooseTxt fl">类别：</div>
									<div class="popsHost_listChooseDet fl">
										<span class="greenBtn"><a href="#">常用</a></span>
										<!-- 选中状态为 greenBtn -->
										<span class="greenBtn-o"><a href="#">自用</a></span>
										<span class="greenBtn-o"><a href="#">市场</a></span>
									</div>
								</li>
							</ul>
							<div class="popsHost_over279">
								<ul class="popsHost_tabel">
									<li class="popsHost_tabelOn">
										<span class="blueTxt">CentOS 5.8 32bit</span>
										<span class="grayTxt">ID: centos58x86a</span>
									</li>
									<li>
										<span class="blueTxt">CentOS 5.8 32bit</span>
										<span class="grayTxt">ID: centos58x86a</span>
									</li>
									<li>
										<span class="blueTxt">CentOS 5.8 32bit</span>
										<span class="grayTxt">ID: centos58x86a</span>
									</li>
									<li>
										<span class="blueTxt">CentOS 5.8 32bit</span>
										<span class="grayTxt">ID: centos58x86a</span>
									</li>
									<li>
										<span class="blueTxt">CentOS 5.8 32bit</span>
										<span class="grayTxt">ID: centos58x86a</span>
									</li>
									<li>
										<span class="blueTxt">CentOS 5.8 32bit</span>
										<span class="grayTxt">ID: centos58x86a</span>
									</li>
								</ul>
							</div>
						</div>
						<div class="popsHost_btn clearfix">
							<span class="grayBtn popsHost_next fr"><a href="#">下一步</a></span>
						</div>
					</div>
					<div class="popsHost_list fl">
						<div class="popsHost_over">
							<ul class="popsHost_setting">
							 	<li>
							 		<p>主机类型</p>
							 		<span>性能型</span>
							 		<span>超高性能型</span>
							 	</li>
							 	<li>
							 		<p>CPU</p>
							 		<span class="settingOn">1核</span>
							 		<span>2核</span>
							 		<span>4核</span>
							 		<span>8核</span>
							 		<span>12核</span>
							 		<span>16核</span>
							 	</li>
							 	<li>
							 		<p>内存</p>
							 		<span>1G</span>
							 		<span>2G</span>
							 		<span>4G</span>
							 		<span>6G</span>
							 		<span>8G</span>
							 		<span>12G</span>
							 		<span>16G</span>
							 		<span>24G</span>
							 		<span>32G</span>
							 		<span>40G</span>
							 	</li>
							</ul>
						</div>
						<div class="popsHost_btn clearfix">
							<span class="grayBtn popsHost_pre fl"><a href="#">上一步</a></span>
							<span class="grayBtn popsHost_next fr"><a href="#">下一步</a></span>
							<!-- <span class="grayBtn-null grayBtn popsHost_next fr">下一步</span> -->
						</div>
					</div>
					<div class="popsHost_list fl">
						<div class="popsHost_over">
							<ul class="popsHost_setting">
							 	<li>
							 		<p>基础网络</p>
							 		<span>基础网络 <sub>提示：基础网络主机的内网 IP 可能会发生变化</sub></span>
							 		<span>网段1 <sub>提示：这是说明说明说明说明</sub></span>
							 		<span>网段2 <sub>提示：这是说明说明说明说明</sub></span>
							 	</li>
							</ul>
						</div>
						<div class="popsHost_btn clearfix">
							<span class="grayBtn popsHost_pre fl"><a href="#">上一步</a></span>
							<span class="grayBtn popsHost_next fr"><a href="#">下一步</a></span>
						</div>
					</div>
					<div class="popsHost_list fl">
						<div class="popsHost_over">
							<ul class="popsHost_base">
								<li class="clearfix">
									<div class="fl">主机名称</div>
									<div class="fr"><input type="text" class="w64" /></div>
								</li>
								<li class="clearfix">
									<div class="fl">主机数量</div>
									<div class="fr"><input type="text" class="w30" value="1" /></div>
								</li>
								<li class="clearfix">
									<div class="fl">SSH登录方式</div>
									<div class="fr">
										<label><input type="radio" name="SSH" />SSH密钥 (?)</label>
										<label><input type="radio" name="SSH" checked="checked" />密码</label>
									</div>
								</li>
								<li class="clearfix">
									<div class="fl">用户名</div>
									<div class="fr"><input type="text" class="w64" value="root" disabled /></div>
								</li>
								<li class="clearfix">
									<div class="fl">SSH密钥</div>
									<div class="fr"><input type="text" class="w30" value="1" /></div>
								</li>
								<li class="clearfix">
									<div class="fl">Hostname</div>
									<div class="fr">
										<input type="text" class="w64" />
										<p>长度不超过 15 个字符。若不填则与主机 ID 相同，形如：i-1234abcd。</p>
									</div>
								</li>
								<li class="clearfix">
									<div class="fl">用户数据</div>
									<div class="fr">
										<label><input type="radio" name="userDate" checked="checked" />无</label>
										<label><input type="radio" name="userDate"/>文本</label>
										<label><input type="radio" name="userDate"/>压缩包</label>
										<label><input type="radio" name="userDate"/>执行文件</label>
									</div>
								</li>
							</ul>
						</div>
						<div class="popsHost_btn clearfix">
							<span class="grayBtn popsHost_pre fl"><a href="#">上一步</a></span>
							<span class="greenBtn fr"><a ng-click="submit()">创建</a></span>
						</div>
					</div>
				</div>
			</div>
			<div class="popsHost_detail fl">
				<p>配置详情</p>
				<table class="popsHost_detTable">
					<tr>
						<td class="popsHost_td1">映像</td>
						<td class="popsHost_td2">安全狗云安全系统（CentOS 6.5 64位）</td>
					</tr>
					<tr>
						<td class="popsHost_td1">主机类型</td>
						<td class="popsHost_td2">性能型</td>
					</tr>
					<tr>
						<td class="popsHost_td1">CPU</td>
						<td class="popsHost_td2">1 核</td>
					</tr>
					<tr>
						<td class="popsHost_td1">内存</td>
						<td class="popsHost_td2">1 G</td>
					</tr>
					<tr>
						<td class="popsHost_td1">名称</td>
						<td class="popsHost_td2">xxxxx</td>
					</tr>
					<tr>
						<td class="popsHost_td1">数量</td>
						<td class="popsHost_td2">111</td>
					</tr>
				</table>
				<h6>
					主机价格: <span>¥0.10</span>每小时<sub>(合¥72.00每月)</sub>
				</h6>
				<h6>
					映像价格: <span>¥0.10</span>每小时<sub>(合¥72.00每月)</sub>
				</h6>
				<h4>
					总价格: <span>¥0.10</span>每小时<sub>(合¥72.00每月)</sub>
				</h4>
			</div>
		</div>
	</div><!-- end of popsHost_cont -->

	<div class="bg"></div>
</div><!-- end of popsHost -->

<div class="pop popsTips" style="display: none;">
	<div class="popCont popsTips_cont">
		<div class="popsTit clearfix">
			<p>提示</p>
			<a href="#"><i class="fa fa-times fa-lg" aria-hidden="true"></i></a>
		</div>
		<div class="popsTips_wrap">
			<div class="popsTips_txt">
				<p>确定创建主机吗？</p>
			</div>
			<div class="popsTips_Btns clearfix">
				<span class="grayBtn fl"><a href="#">取消</a></span>
				<span class="greenBtn fr"><a href="#">确定</a></span>
			</div>
		</div>
	</div>

	<div class="bg"></div>
</div><!-- end of popsTips -->

<script type="text/javascript" src="./js/jquery-1.7.2-min.js"></script>
<script type="text/javascript" src="./js/jq/jquery.goup.min.js"></script>
<script type="text/javascript" src="./js/jq/echarts.min.js"></script>
<script type="text/javascript" src="./js/common.js"></script>
<script type="text/javascript" src="./js/host.js"></script>
<script type="text/javascript">
window.onload=function(){
	reSize();
}

$(window).resize(function(){
	reSize();	  				  
});

function reSize(){
	var window_W = $(window).width();
	var window_H = $(window).height();
	console.log(window_W,window_H);
	$('.menus').css('min-Height',window_H-55);
	/*$('.main').width(window_W-243).css('min-width','857px');*/
}

//左侧菜单
$('.menusCont li a.menusCont_a').on('click',function(){
    $(this).next().slideToggle('fast');
});
$('.menusCont li a').on('click',function(){
    $('.menusCont li a').removeClass('menusCont_on');
    $(this).addClass('menusCont_on');
});

</script>

</body>
</html>